page-mine {
  $bg:linear-gradient(to right,#7BD1F9,#45A4F1);
  .toolbar-background{
    background: $bg;
    &.toolbar-background-ios,
    &.toolbar-background-md{
      border: none;
    }
  }
  .toolbar-content{
    .bar-button,
    .toolbar-title{
      color: #fff;
    }
  }
  .mine-header{
    padding-top: 24px;
    .bar-button{
      .iconfont{
        font-size: 26px;
      }
      &.message-icon{
        position: relative;
        b{
          width: 8px;
          height: 8px;
          border-radius: 50%;
          display: block;
          position: absolute;
          background: map_get($text-colors,danger);
          top: 2px;
          right: 2px;
        }
      }
    }
  }
  .mine-box{
    height: 140px;
    background: $bg;
    position: relative;
    >div{
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
    }
    .user-logo{
      width: 60px;
      height: 60px;
      background: #fff;
      border-radius: 100px;
      left: 20px;
      position: relative;
      transition: all .5s;
      img{
        height: 40px;
        @include middle-center;
      }
      &.loginout{
        left: 50%;
        transform: translate(-50%, calc(-20px - 50%));
      }
    }
    .user-logo-title{
      text-align: center;
      position: absolute;
      bottom: -30px;
      left: 50%;
      width: 120px;
      transform: translateX(-50%);
      font-size: 15px;
      color: #FFFFFF;
    }
    .user-info{
      right: 20px;
      b{
        font-size: 26px;
        display: block;
        color: #fff;
        margin-bottom: 10px;
      }
      span{
        display: block;
        font-size: 12px;
        color: rgba(255,255,255,0.4);
        text-align: right;
      }
    }
  }
  .mine-buttons{
    font-size: 0;
    button{
      width: calc(50% - 10px);
      box-shadow: none;
      margin: 0;
      display: inline-block;
      height: 60px;
      border-radius: 10px;
      &:first-child{
        margin-right: 10px;
        background-image: linear-gradient(48deg, #FF815A, #FF5E70)
      }
      &:last-child{
        margin-left: 10px;
        background-image: linear-gradient(134deg, #7BD1F9, #45A4F1);
      }
      &.activated{
        box-shadow: none;
      }
    }
  }
  .mine-toolbar{
    ion-list{
      border-radius: 10px;
      background: #FFFFFF;
      color: rgba(0,0,0,0.6);
      overflow: hidden;
      .item{
        padding-left: 0;
        @include g-border-top-1px;
        .item-inner{
          padding-left: 20px;
          border-bottom: none;
        }
        &:first-child{
          box-shadow: none;
          border-top-right-radius: 10px;
          border-top-left-radius: 10px;
        }
        &:last-child{
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
        }
      }
      button:last-child{
        .item-inner{
          border-bottom: none;
        }
      }
      .note{
        font-size: 14px;
      }
      .note-danger{
        color: #FF6969;
      }
    }
  }
}
